<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div id="loading-btn">
	<button><span>Hover me</span></button>

<!--	<a href="#">sunbutton</a>-->

</div>

</body>
<style>
	#draw-border {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	button {
		border: 0;
		background: none;
		text-transform: uppercase;
		color: #4361ee;
		font-weight: bold;
		position: relative;
		outline: none;
		padding: 10px 20px;
		box-sizing: border-box;
	}

	button::before, button::after {
		box-sizing: inherit;
		position: absolute;
		content: '';
		border: 2px solid transparent;
		width: 0;
		height: 0;
	}

	button::after {
		bottom: 0;
		right: 0;
	}

	button::before {
		top: 0;
		left: 0;
	}

	button:hover::before, button:hover::after {
		width: 100%;
		height: 100%;
	}

	button:hover::before {
		border-top-color: #4361ee;
		border-right-color: #4361ee;
		transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
	}

	button:hover::after {
		border-bottom-color: #4361ee;
		border-left-color: #4361ee;
		transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
	}



	/*#loading-btn {*/
	/*	display: flex;*/
	/*	align-items: center;*/
	/*	justify-content: center;*/
	/*	height: 100vh;*/
	/*}*/

	/*button {*/
	/*	background: transparent;*/
	/*	border: 0;*/
	/*	border-radius: 0;*/
	/*	text-transform: uppercase;*/
	/*	font-weight: bold;*/
	/*	font-size: 20px;*/
	/*	padding: 15px 50px;*/
	/*	position: relative;*/
	/*}*/

	/*button:before {*/
	/*	transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);*/
	/*	content: '';*/
	/*	width: 1%;*/
	/*	height: 100%;*/
	/*	background: #ff5964;*/
	/*	position: absolute;*/
	/*	top: 0;*/
	/*	left: 0;*/
	/*}*/

	/*button span {*/
	/*	mix-blend-mode: darken;*/
	/*}*/

	/*button:hover:before {*/
	/*	background: #ff5964;*/
	/*	width: 100%;*/
	/*}*/


	/** {*/
	/*	margin: 0;*/
	/*	padding: 0;*/

	/*}*/

	/*a { !*去掉下划线*!*/
	/*	text-decoration: none;*/
	/*	position: absolute;*/
	/*	left: 50%;*/
	/*	top: 50%;*/
	/*	transform: translate(-50%, -50%);*/
	/*	!* 设置字体大小 *!*/
	/*	font-size: 24px;*/
	/*	background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);*/
	/*	background-size: 400%;*/
	/*	width: 400px;*/
	/*	height: 100px;*/
	/*	line-height: 100px;*/
	/*	text-align: center;*/
	/*	color: #fff;*/
	/*	!* 字母变大写 *!*/
	/*	text-transform: uppercase;*/
	/*	!* 设置成胶囊状 *!*/
	/*	border-radius: 50px;*/
	/*	z-index: 1;*/
	/*}*/

	/*!* 设置发光 *!*/
	/*a::before {*/
	/*	content: "";*/
	/*	position: absolute;*/
	/*	left: -5px;*/
	/*	right: -5px;*/
	/*	top: -5px;*/
	/*	bottom: -5px;*/
	/*	background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);*/
	/*	background-size: 400%;*/
	/*	border-radius: 50px;*/
	/*	filter: blur(20px);*/
	/*	z-index: -1;*/
	/*}*/

	/*a:hover::before {*/
	/*	animation: sun 8s infinite;*/
	/*}*/

	/*a:hover {*/
	/*	animation: sun 8s infinite;*/
	/*}*/

	/*!* 设置流光 *!*/
	/*@keyframes sun {*/
	/*	100% {*/
	/*		background-position: -400% 0;*/
	/*	}*/
	//}
</style>
</html>
